<template>
    <div class="is-require">
      <van-cell :value="displayData" :required="required" :title="title" is-link @click="showPopup = true" />

      <van-popup v-model="showPopup" position="bottom" :overlay="overlay">
        <van-datetime-picker
          v-model="defaultDate"
          :type="dateType"
          @confirm="onConfirm"
          @cancel="onCancel"
          :formatter="formatter"
        />
      </van-popup>
    </div>
</template>
<script>
import Vue from 'vue'
import { Popup, DatetimePicker } from 'vant';
import dayjs from 'dayjs';


export default {
  name: 'zx-timerange-picker',
  components:{
    vanPopup: Popup,
    vanDatetimePicker: DatetimePicker
  },
  props: {
    value: {
      type: [String, Number, Array]
    },
    overlay: {
      type: Boolean,
      default: true,
    },
    required: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String
    },
    timeFormat: {
      type: String,
      default: 'YYYY-MM-DD',
    },
    dateType: {
      type: String,
      default: 'date'
    }
  },
  data() {
    return {
      showPopup: false,
      selectValue: '',
      areaCode: '',
      defaultDate: new Date(),
      displayData: ''
    };
  },
  watch: {},
  mounted() {
      this.displayData = this.value;
      this.defaultDate = dayjs(this.value).toDate();
  },
  computed: {},
  methods: {
    onConfirm(value) {
      this.showPopup = false;
      this.displayData = dayjs(value).format(this.timeFormat);
      this.$emit('input', this.displayData);
    },
    onCancel() {
      this.showPopup = false;
    },
    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`;
      } else if (type === 'month') {
        return `${value}月`
      }
      return value;
    }
  }
}
</script>
